<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./public/tpduo.css">
    <style>
        .small_box {
            width: 350px;
            height: 350px;
            float: left;
            position: relative
        }

        .small_box img {
            width: 350px;
            height: 350px;
        }

        .small_box span {
            background: rgba(200, 200, 200, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .small_box em {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
        }

        .big_box {
            width: 350px;
            height: 350px;
            float: left;
            overflow: hidden;
            display: none;
            position: relative;
            z-index: 1;
        }

        .big_box img {
            width: 800px;
            height: 800px;
            position: absolute;
        }

        .huaxian {
            width: 1000%;
            height: 1px;
            background-color: #000;
        }


        #you{
            width: 200px;
            height: 418px;
            background-color: blue;     position: absolute;
           left: 1200px;
        }
    </style>
</head>

<body>

    <div class="wangjun">

    </div>

    <div class="huaxian"></div>

    <div class="small_box">
        <img src="https://p1.ssl.qhimg.com/t01480f118d233044a6.webp" alt="">
        <span></span>
        <em></em>
    </div>
    <div class="big_box">
        <img src="https://p1.ssl.qhimg.com/t01480f118d233044a6.webp" alt="">
    </div>


    <div class="big-rig" id="you">

    </div>




</body>
<script src="./libs/jquery.js"></script>

<script>
    $(".wangjun").load("http://localhost:3000/public/toubu.html .body")



    class Magnifier {
        constructor() {

            this.sBox = document.querySelector(".small_box");
            this.sSpan = document.querySelector(".small_box span");
            this.bBox = document.querySelector(".big_box");
            this.bImg = document.querySelector(".big_box img");

            this.addEvent();
        }
        move(ops) {

            let l = ops.x - this.sSpan.offsetWidth / 2;
            let t = ops.y - this.sSpan.offsetHeight / 2;

            if (l < 0) l = 0;
            if (t < 0) t = 0;
            if (l > this.sBox.offsetWidth - this.sSpan.offsetWidth) {
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if (t > this.sBox.offsetHeight - this.sSpan.offsetHeight) {
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }

            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";

            const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);

            this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
            this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
        }
        init() {

            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";

            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
        }
        addEvent() {
            const that = this;

            this.sBox.onmouseenter = function () {
                // 执行显示
                that.show();
            }
            // 离开
            this.sBox.onmouseleave = function () {

                that.hide();
            }
            this.sBox.onmousemove = function (eve) {
                const e = eve || window.event;
                const pos = {
                    x: e.offsetX,
                    y: e.offsetY
                };

                // 执行移动
                that.move(pos);
            }
        }
        show() {
            // 显示
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
            // 执行补全布局
            this.init();
        }
        hide() {
            // 隐藏
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }

    new Magnifier();

</script>

</html>